<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>

    <!--
         cookie的定义:Cookie实际上是一小段的文本信息（key-value格式）。客户端向服务器发起请求
         如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会
         把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。
         服务器检查该Cookie，以此来辨认用户状态。

         cookie机制：
         当用户第一次访问并登陆一个网站的时候，cookie的设置以及发送会经历以下4个步骤：
         （1）客户端发送一个请求到服务器 --》
         （2）服务器发送一个HttpResponse响应到客户端，其中包含Set-Cookie的头部 --》
         （3）客户端保存cookie，之后向服务器发送请求时，HttpRequest请求中会包含一个Cookie的头部 --》
         （4）服务器返回响应数据
-->

    <div id="root">
        <!--cookie学习原理图-->
        <img src="./js/cookie.png">



    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            message: '<h3>周杰伦</h3>',
        }
    });
</script>

</html>